<template>
  <div id="footer">
    <div class="footerMain">
      <div style="height: 80px"></div>
      <div role="contentinfo">
        <div class="container">
          <div class="row">
            <div class="col-md-2 col-sm-4">
              <h3>Categories</h3>
              <ul>
                <li><a href="javascript:;">Shoes</a></li>
                <li><a href="javascript:;">Clothing</a></li>
                <li><a href="javascript:;">Accessories</a></li>
                <li><a href="javascript:;">Men</a></li>
                <li><a href="javascript:;">Women</a></li>
                <li><a href="javascript:;">Kids</a></li>
                <li><a href="javascript:;">Pets</a></li>
              </ul>

            </div>
            <div class="col-md-2 col-sm-4">
              <h3>Styles</h3>
              <ul>
                <li><a href="javascript:;">Athletic</a></li>
                <li><a href="javascript:;">Casual</a></li>
                <li><a href="javascript:;">Dress</a></li>
                <li><a href="javascript:;">Everyday</a></li>
                <li><a href="javascript:;">Other Days</a></li>
                <li><a href="javascript:;">Alternative</a></li>
                <li><a href="javascript:;">Otherwise</a></li>
              </ul>
            </div>
            <div class="col-md-2 col-sm-4">
              <h3>Other</h3>
              <ul>
                <li><a href="javascript:;">Link</a></li>
                <li><a href="javascript:;">Another link</a></li>
                <li><a href="javascript:;">Link again</a></li>
                <li><a href="javascript:;">Try this</a></li>
                <li><a href="javascript:;">Don't you dare</a></li>
                <li><a href="javascript:;">Oh go ahead</a></li>
              </ul>
            </div>
            <div class="about col-md-6 col-sm-12">
              <h3>About Us</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit.</p>
              <a class="btn btn-default btn-xs pull-right" href="javascript:;">Learn more <span
                class="fa fa-circle-arrow-right"></span></a>
            </div>
          </div>

          <ul class="social">
            <li><a href="#" title="Twitter Profile"><span class="icon fa fa-twitter"></span></a></li>
            <li><a href="#" title="Facebook Page"><span class="icon fa fa-facebook"></span></a></li>
            <li><a href="#" title="LinkedIn Profile"><span class="icon fa fa-linkedin"></span></a></li>
            <li><a href="#" title="Google+ Profile"><span class="icon fa fa-google-plus"></span></a></li>
            <li><a href="#" title="GitHub Profile"><span class="icon fa fa-github-alt"></span></a></li>
          </ul>

          <p class="footer-brand">
            <a href="#">
              <img src="../../static/img/header/suosou.png" width="80" alt="Bootstrappin'"></a>
          </p>
        </div>
      </div>
    </div>
    <div style="height: 30px"></div>
  </div>
</template>

<script>

  export default {
    data () {
      return {}
    },
    methods: {}
  }
</script>

<style scoped>
  #footer {
    width: 100%;
    min-height: 400px;
    background: var(--pColor);
  }

  .footerMain {
    width: 75%;
    margin: auto;
  }

  h3 {
    color: white;
  }

</style>
